<template>
    <view class="container">
        <uni-nav-bar :border="false" statusBar title="工单详情" color="#ffffff" left-icon="left"
            backgroundColor="transparent" @clickLeft="onBack">
        </uni-nav-bar>

        <view class="box">
            <view class="mainBox">
                <view class="id">{{ query?.name || '工单详情' }}</view>
                <!-- <view class="val">{{ data.deptName }}<text>{{ data.applicationUser }}</text></view> -->
                <!-- <view class="status">状态{{data.orderStatus == 2 ? '已完成' : '未完成'}}</view> -->
            </view>
            <view class="infoBox">
                <view class="item">
                    <text class="name">申请人</text>
                    <text class="val">{{ data?.applicationUser }}{{ data?.deptName ? `[${data?.deptName}]` : '' }}</text>
                </view>
                <view class="item">
                    <text class="name">申请人电话</text>
                    <text class="val">{{ data?.applicationPhone }}</text>
                </view>
                <view class="item">
                    <text class="name">申请时间</text>
                    <text class="val">{{ data?.applicationDate }}</text>
                </view>
                <view class="item">
                    <text class="name">入住时间</text>
                    <text class="val">{{ data?.startDate }}</text>
                </view>
                <view class="item">
                    <text class="name">退房时间</text>
                    <text class="val">{{ data?.endDate }}</text>
                </view>
                <view class="item">
                    <text class="name">时长(天)</text>
                    <text class="val">{{ data?.days + '天' }}</text>
                </view>
                <view class="item">
                    <text class="name">入住人</text>
                    <text class="val">{{ data?.occupant }}</text>
                </view>
                <view class="item">
                    <text class="name">入住人单位</text>
                    <text class="val">{{ data?.occupantUnit }}</text>
                </view>
                <view class="item">
                    <text class="name">入住人数</text>
                    <text class="val">{{ data?.peopleNumber }}</text>
                </view>
                <view class="item">
                    <text class="name">入住人员情况说明</text>
                    <text class="val">{{ data?.situationExplain }}</text>
                </view>
            </view> 
            <view-audit :query="query" />
        </view>
    </view>
</template>

<script>
import {
    getExterPersonApartmentDetail,
} from '@/api/workOrder';
import ViewAudit from './viewAudit.vue';
export default {
    components: {
        ViewAudit,
    },
    data() {
        return {
            data: {},
            query: {},
        }
    },
    onLoad(query) {
        this.query = query;
        this.getData();
    },
    methods: {
        getData() {
            getExterPersonApartmentDetail(this.query.businessKey).then(res => {
                this.data = res.data;
            })
        },
        // 跳转页面
        onLocation(url) {
            uni.navigateTo({
                url
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: calc(100vh - 160rpx);
    padding-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom) + 160rpx);
	padding-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom) + 160rpx);
    background: linear-gradient(180deg, #D7E4FD 0%, #fff 50%);
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    .box {
        margin: 50rpx 36rpx 0;
        padding: 24rpx;
        background: #FFFFFF;
        border-radius: 12rpx;
        box-shadow: 0 0 30rpx 0 #ccc;
        .mainBox {
            text-align: center;
            padding: 40rpx 0;
            line-height: 1;

            .id {
                font-size: 38rpx;
                font-weight: bold;
                color: #4288FF;
                padding-bottom: 40rpx;
            }

            .val {
                font-size: 40rpx;
                font-weight: 800;
                color: #FF884D;
                padding-bottom: 27rpx;

                text {
                    font-size: 30rpx;
                    margin-left: 10rpx;
                }
            }

            .status {
                font-size: 26rpx;
                font-weight: 500;
                color: #555555;
            }
        }
        .infoBox {
            .item {
                font-size: 30rpx;
                font-weight: 500;
                padding: 22rpx 12rpx;
                display: flex;
                justify-content: space-between;
                border-bottom: 2rpx solid #EAEAEA;
                &:last-child {
                    border-bottom: 0;
                }
                .name {
                    color: #989898;
                }

                .val {
                    width: 60%;
                    color: #333;
                    text-align: right;
                    word-break: break-all;
                }
            }
        }
    }
    .myLabel {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .star {
            color: #dd524d;
        }
    }
}
</style>
